<template>
  <div>
    <div class="top-content">
      <div class="left">
        <span>热门彩种:</span>
        <span v-for="(v,k) in hot_game_list">
          <router-link :class="v.isSelect?'is-select':''" @click.native="game_click(v)" :to="v.url">{{v.name}}</router-link>
        </span>
      </div>
      <div class="right">
        <select_comp ref="zhudan" @game_selected="temp_selected" :list="zhudan_list" :select_name="'查看注单类型:'" :type="'zhudan'">
          <!--<option v-for="(v,k) in zhudan_list" :key="k" :value="parseInt(v.type)?v.type:v.id">{{v.name}}</option>-->
        </select_comp>
        <!--<div>-->
          <!--<span>查看注单类型:</span>-->
          <!--<select>-->
            <!--<option v-for="(v,k) in zhudan_list" :key="k" :value="v.type">{{v.name}}</option>-->
          <!--</select>-->
        <!--</div>-->
        <select_comp ref="game" @game_selected="temp_selected" :_selected="game_selected" :list="game_list" :select_name="'全部彩种:'" :type="'game'">
          <!--<option v-for="(v,k) in game_list" :key="k" :value="parseInt(v.type)?v.type:v.id">{{v.name}}</option>-->
        </select_comp>
        <!--<div>-->
          <!--<span>全部彩种:</span>-->
          <!--<select v-model="game_selected">-->
            <!--<option v-for="(v,k) in game_list" :key="k" :value="v.id">{{v.name}}</option>-->
          <!--</select>-->
        <!--</div>-->
      </div>
    </div>
    <div>
      <div class="title-content">
        <div class="left">
          <span v-for="(v,k) in game_wanfa" :key="k" @click="wanfa_click(v)" :class="v.isSelect?'is-select':''">
            {{v.name}}
          </span>
        </div>
        <div class="right">
          <span>第1565864678000期开奖:</span>
          <div class="game-num">
            <span v-for="v in game_num">{{v}}</span>
          </div>
          <input value="刷新"/>
          <span class="update-time">200秒</span>
          <select>
            <option v-for="(v,k) in update_time_list" :value="v.type">{{v.name}}</option>
          </select>
        </div>
      </div>
      <div class="game-info">
        <span>第1565864678001期</span>
        <span>距封盘: 00:00</span>
        <span>今日输赢: 0</span>
      </div>
    </div>
    <div class="body-content">
        <router-view></router-view>
    </div>
  </div>

</template>

<script>
    import store from "../vuex/store";

    export default {
        name: "LiveGame",
        data(){
          return {
            hot_game_list:Tools.global_info.hot_game_list,
            zhudan_list:Tools.global_info.zhudan_list,
            game_list:Tools.global_info.game_list,
            game_wanfa:Tools.global_info.game_wanfa['ssc'],
            game_num:[1,2,3,4,5],
            update_time_list:Tools.global_info.update_time_list,
            game_item:null,
            wanfa_item:null,
            game_selected:'',
          }
        },
        props:[],
        methods:{
          ...Tools.mapMutations('a',[
            'add_count',
            'remove_count'
          ]),
          ...Tools.mapActions('a',[
            'add_countAsync'
          ]),
          wanfa_click:function(event){
            this.add_countAsync({num:1}).then(()=>{
              console.log("调用完成");
            }).catch(()=>{
              console.log('调用出错')
            });
            // this.add_count(10)
            // this.$store.dispatch('add_countAsync',{num:1});
            console.log(event);
            if(this.wanfa_item&&event){
              this.wanfa_item.isSelect=false;
              this.wanfa_item=event;
            }
            else if(!event){
              this.wanfa_item=this.game_wanfa[0];
            }
            else{
              for(var i=0;i<this.game_wanfa.length;i++){
                if(this.game_wanfa[i].isSelect){
                  this.wanfa_item=this.game_wanfa[i];
                  break;
                }
              }
            }
            this.wanfa_item.isSelect=true;
          },
          game_click:function(event){
            console.log(event);
            if(this.game_item&&event){
              this.game_item.isSelect=false;
              this.game_item=event;
            }
            else if(!event){
              this.game_item=this.hot_game_list[0];
            }
            else{
              for(var i=0;i<this.hot_game_list.length;i++){
                if(this.hot_game_list[i].isSelect){
                  this.game_item=this.hot_game_list[i];
                  break;
                }
              }
            }
            this.game_item.isSelect=true;
            this.game_wanfa=Tools.global_info.game_wanfa[this.game_item.type];
            this.game_selected=this.game_item.id;
          },
          temp_selected:function (value) {
            console.log(value)
          },
          onfocus:function (e) {
            console.log(e)
          }
        },
        components:{
          select_comp:Tools.Routes.selectComp
        },
        mounted(){
          // this.game_click(null);
          // this.wanfa_click(null);
          // console.log(this.$refs)
          // // this.$refs.game.game_selected=100;
          console.log('>>>>>>>>>>>>>>>>>$refs ',this.$refs.vv)
          console.warn('live--------------')
          this.$nextTick(function () {
            //dom已更新
            console.log('>>>>>>>>>dom已更新>>>>>>>>$refs ',this.$refs.vv)
          })
        },
        activated(){
          console.warn('live--------activated------')
        },
        created(){
          // console.log(this.$refs)
          // this.$root.$on('game_selected',value=>{
          //   console.log(value)
          //   if(value.type=='game')
          //     this.game_selected=value.game;
          // })
        },
        watch:{
          game_selected:function(){
            if(this.game_item)
              this.game_item.isSelect=false;
            for(var i=0;i<this.hot_game_list.length;i++){
              if(this.hot_game_list[i].id==this.game_selected){
                this.game_item=this.hot_game_list[i];
                break;
              }
            }
            this.game_item.isSelect=true;
            this.game_wanfa=Tools.global_info.game_wanfa[this.game_item.type];
            this.game_selected=this.game_item.id;
          }
        }
    }
</script>

<style scoped lang="scss">
.top-content{
  position: relative;
  .left{
    color: white;
    line-height: 30px;
    text-align: left;
    span{
      margin-left: 5px;
      margin-right: 10px;
      font-size: 14px;
    }
    span:nth-child(1){
      margin-left: 5px;
      margin-right: 0px;
      font-size: 12px;
    }
    span a:hover{
      color: #cecdcd;
    }
    .is-select{
      font-size: 16px;
      color: #cecdcd;
    }
  }
  .right{
    position: absolute;
    right: 0;
    top: 0;
    text-align: center;
    line-height: 30px;
    color: white;
    font-size: 15px;
    div{
      display: inline;
    }
    select{
      width: 100px;
      padding:2px 5px;
      border-radius: 5px;
      margin-right: 5px;
    }
  }
}
.title-content{
  position: relative;
  width: auto;
  min-width: 1000px;
  height: 30px;
  background: #A4BBD3;
  line-height: 30px;
  .left{
    span:first-child{
      margin-left: 5px;
    }
    span{
      padding: 0 15px;
      border-radius: 5px;
    }
    .is-select{
      color: white;
      background-color: #9ac1d3;
      font-size: 15px;
      box-shadow: 2px 2px 2px 1px #484848;
    }
  }
  .right{
    position: absolute;
    right: 0;
    top: 0;
    margin-right: 5px;
    div{
      display: inline;
    }
    .game-num span{
      margin: 0 1px;
      padding: 4px 10px;
      background-color: #1479D7;
      border-radius: 50px;
      color: white;
    }
    input{
      width: 50px;
      line-height: 20px;
      background-color: #D78F0F;
      color: white;
      text-align: center;
      border-radius: 5px;
      box-shadow: 2px 2px 2px 1px #484848;
    }
    .update-time{
      display: inline-block;
      width: 50px;
      text-align: center;
    }
    select{
      width: 60px;
      height: 22px;
      padding-left: 5px;
      border-radius: 5px;
    }

  }
}
.game-info{
  min-width: 1000px;
  height: 30px;
  background-color: #6C87BD;
  color: white;
  line-height: 30px;
  padding-left: 5px;
  span{
    margin-right: 8px;
  }
}
</style>
